<template>
	<div style="width: 100%;">
		<van-nav-bar title="工作流任务管理" />
		<van-tabs v-model:active="active" @change="onTabChange">
			<van-tab :title="item.label" v-for="(item,index) in menuItemList" :key="index"></van-tab>
		</van-tabs>
		<div style="margin:0 5px;">
			<div style="border:1px solid #ddd;margin-top: 5px;" v-for="(item,index) in taskList" :key="index">
				<van-row>
					<van-col :span="12">
						<img src="../../../assets/4.png" style="width:48px;height:48px;" />
					</van-col>
					<van-col :span="12">
						<div style="font-weight: bold;">{{item.processName}}</div>
						<div style="margin-top: 10px;">{{item.taskName}}</div>
						<div>
							<van-tag type="warning">{{item.processStateName}}</van-tag>
						</div>
					</van-col>
				</van-row>
				<van-row style="margin-top: 10px;">
					<van-col :span="12">
						<div style="display: flex;">
							<div style="width:60px;">
								{{item.doc_label_0}}:
							</div>
							<div>
								{{item.doc_value_0}}
							</div>
						</div>
						<div style="display: flex;;">
							<div style="width:60px;">
								{{item.doc_label_1}}:
							</div>
							<div>
								{{item.doc_value_1}}
							</div>
						</div>
						<div style="display: flex;">
							<div style="width:60px;">
								{{item.doc_label_2}}:
							</div>
							<div>
								{{item.doc_value_2}}
							</div>
						</div>
					</van-col>
					<el-col :span="12" style="text-align: right;">
						<div>{{item.taskCreteTime}}</div>
						<div>
							<van-button @click.prevent="onResubmitClickHandler(index)" size="small"
								v-if="item.canUserInput==true" round type="primary">
								重新提交
							</van-button>
							<van-button @click.prevent="onApproveClickHandler(index)" size="small"
								v-if="item.canUserInput==false" round type="primary">
								同意
							</van-button>
							<van-button @click.prevent="onRejectClickHandler(index)" size="small"
								v-if="item.canUserInput==false" style="margin-left: 10px;" round>
								拒绝
							</van-button>
							<van-button @click.prevent="onBackClickHandler(index)" size="small"
								v-if="item.canBack==true" style="margin-left: 10px;" round>
								打回
							</van-button>
							<van-button @click.prevent="onDocClickHandler(index)" size="small"
								style="margin-left: 10px;" round>
								单据
							</van-button>
						</div>
					</el-col>
				</van-row>
			</div>
			<van-pagination v-model="currentPage" :total-items="total" :items-per-page="5"
				v-show="currentPageType=='init' ||currentPageType=='processed'" @change="currentPageChange" />
		</div>
		<van-popup v-model:show="approveDialogVisible" closeable :style="{ height: '100%',width:'100%' }"
			:lazy-render="false">
			<van-field v-model="opinion" label="同意意见" type="textarea" rows="2" autosize />
			<van-button @click="onApproveOkClickHandler()">确定</van-button>
		</van-popup>
		<van-popup v-model:show="rejectDialogVisible" closeable :style="{ height: '100%',width:'100%' }"
			:lazy-render="false">
			<van-field v-model="opinion" label="拒绝意见" type="textarea" rows="2" autosize />
			<van-button @click="onRejectOkClickHandler()">确定</van-button>
		</van-popup>
		<van-popup v-model:show="backDialogVisible" closeable :style="{ height: '100%',width:'100%' }"
			:lazy-render="false">
			<van-field v-model="opinion" label="打回意见" type="textarea" rows="2" autosize />
			<van-button @click="onBackOkClickHandler()">确定</van-button>
		</van-popup>
		<van-popup v-model:show="docDialogVisible" closeable :style="{ height: '100%',width:'100%' }"
			:lazy-render="false">
			<mobile-page-component ref="pageComponent"></mobile-page-component>
		</van-popup>
	</div>
</template>

<script>
	import restUtil from '@/utils/restUtil.js';
	import {
		Dialog
	} from 'vant';
	export default {
		name: "MWorkflowTaskManagement",
		components: {

		},
		data() {
			return {
				menuItemList: [{
						"label": "我的待办",
						"type": "todo",
					},
					{
						"label": "我发起的",
						"type": "init",
					},
					{
						"label": "我处理的",
						"type": "processed",
					}
				],
				taskList: [],
				approveDialogVisible: false,
				opinion: "",
				currentIndex: -1,
				rejectDialogVisible: false,
				docDialogVisible: false,
				backDialogVisible: false,
				paraMap: {},
				currentPageType: "todo",
				total: 0,
				currentPage: 1,
				active: 0
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/init").then(
					function(response) {
						if (response.data.code == 1) {
							that.taskList = response.data.taskList;
						} else {
							Dialog.alert({
								title: '提示',
								message: response.data.message,
							}).then(() => {
								// on close
							});
						}
					});
			},
			onApproveClickHandler(index) {
				this.opinion = "";
				this.currentIndex = index;
				this.approveDialogVisible = true;
			},
			onApproveOkClickHandler() {
				this.approveDialogVisible = false;
				var that = this;
				restUtil.postAction(this,"workflowtaskmanagement/approve?taskId=" + this.taskList[this
						.currentIndex].taskId +
					"&opinion=" + this.opinion).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							Dialog.alert({
								title: '提示',
								message: response.data.message,
							}).then(() => {
								// on close
							});
						}
					});
			},
			onRejectClickHandler(index) {
				this.opinion = "";
				this.currentIndex = index;
				this.rejectDialogVisible = true;
			},
			onRejectOkClickHandler() {
				this.rejectDialogVisible = false;
				var that = this;
				restUtil.postAction(this,"workflowtaskmanagement/reject?taskId=" + this.taskList[this
						.currentIndex].taskId +
					"&opinion=" + this.opinion).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							Dialog.alert({
								title: '提示',
								message: response.data.message,
							}).then(() => {
								// on close
							});
						}
					});
			},
			onDocClickHandler(index) {
				this.currentIndex = index;
				this.docDialogVisible = true;
				this.$nextTick(function() {
					this.$refs.pageComponent.navigatePage(this.taskList[index].mobileFormCode, {
						"action": "dataView",
						"id": this.taskList[index].bizKey
					});
				});
			},
			onBackClickHandler(index) {
				this.opinion = "";
				this.currentIndex = index;
				this.backDialogVisible = true;
			},
			onBackOkClickHandler() {
				var that = this;
				this.backDialogVisible = false;
				restUtil.postAction(this,"workflowtaskmanagement/back?taskId=" + this.taskList[this
						.currentIndex]
					.taskId + "&opinion=" + this.opinion).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							Dialog.alert({
								title: '提示',
								message: response.data.message,
							}).then(() => {
								// on close
							});
						}
					});
			},
			onResubmitClickHandler(index) {
				this.currentIndex = index;
				var that = this;
				restUtil.postAction(this,"workflowtaskmanagement/resubmit?taskId=" + this.taskList[this
						.currentIndex].taskId)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.init();
							} else {
								Dialog.alert({
									title: '提示',
									message: response.data.message,
								}).then(() => {
									// on close
								});
							}
						});
			},
			onTabChange() {
				var menuItem = this.menuItemList[this.active];
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/onPageChangeHandler?pageType=" + menuItem.type)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.currentPageType = menuItem.type;
								that.currentPageTitle = menuItem.label;
								that.taskList = response.data.taskList;
								that.total = response.data.total;
							} else {
								Dialog.alert({
									title: '提示',
									message: response.data.message,
								}).then(() => {
									// on close
								});
							}
						});
			},
			currentPageChange() {
				var that = this;
				restUtil.getAction(this,"workflowtaskmanagement/onPageHandler?pageType=" + this
						.currentPageType + "&page=" + this.currentPage)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.taskList = response.data.taskList;
								that.total = response.data.total;
							} else {
								Dialog.alert({
									title: '提示',
									message: response.data.message,
								}).then(() => {
									// on close
								});
							}
						});
			}
		},
	}
</script>

<style>
</style>
